* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    box-sizing: border-box;
    height: 100%;
    font-family: var(--el-font-family);
    font-size: 12px;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: normal;
}

ol,
ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

// flex 布局相关类名
$justify: (
    start: flex-start,
    center: center,
    end: flex-end,
    between: space-between,
    around: space-around,
);
$align: (
    start: flex-start,
    center: center,
    end: flex-end,
);

@each $alignKey, $alignVal in $align {
    @each $justifyKey, $justifyVal in $justify {
        .flex-#{$justifyKey}-#{$alignKey} {
            display: flex;
            align-items: #{$alignVal};
            justify-content: #{$justifyVal};
        }
    }
}

.flex-1 {
    flex: 1;
}

.flex-column {
    flex-direction: column;
}

// padding margin 相关
$distance-config: (2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40);

.mr-lr-auto {
    margin: 0 auto;
}

@each $i in $distance-config {
    .pd-#{$i} {
        padding: #{$i}px;
    }
    .pd-lr-#{$i} {
        padding-right: #{$i}px;
        padding-left: #{$i}px;
    }
    .pd-tb-#{$i} {
        padding-top: #{$i}px;
        padding-bottom: #{$i}px;
    }
    .pd-l-#{$i} {
        padding-left: #{$i}px;
    }
    .pd-r-#{$i} {
        padding-right: #{$i}px;
    }
    .pd-t-#{$i} {
        padding-top: #{$i}px;
    }
    .pd-b-#{$i} {
        padding-bottom: #{$i}px;
    }
    .mr-#{$i} {
        margin: #{$i}px;
    }
    .mr-lr-#{$i} {
        margin-right: #{$i}px;
        margin-left: #{$i}px;
    }
    .mr-tb-#{$i} {
        margin-top: #{$i}px;
        margin-bottom: #{$i}px;
    }
    .mr-l-#{$i} {
        margin-left: #{$i}px;
    }
    .mr-r-#{$i} {
        margin-right: #{$i}px;
    }
    .mr-t-#{$i} {
        margin-top: #{$i}px;
    }
    .mr-b-#{$i} {
        margin-bottom: #{$i}px;
    }
}

// 字体大小
$font-size-config: (
    'xs': 10px,
    's': 12px,
    'm': 14px,
    'l': 16px,
    'xl': 18px,
    'xxl': 20px,
    'xxxl': 22px,
);

@each $sizeKey, $sizeValue in $font-size-config {
    .font-#{$sizeKey} {
        font-size: $sizeValue;
    }
}

// 字体weight
$font-weight-config: (100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold, bolder);

@each $weightValue in $font-weight-config {
    .font-weight-#{$weightValue} {
        font-weight: $weightValue;
    }
}

// 字体颜色 继承自element-plus
$font-color-config: (
    'primary': #303133,
    'regular': #606266,
    'secondary': #909399,
    'disabled': #c0c4cc,
    'placeholder': #a8abb2,
);

@each $colorKey, $colorValue in $font-color-config {
    .color-#{$colorKey} {
        color: $colorValue;
    }
}

// 圆角
$border-radius-config: (
    's': 2px,
    'm': 4px,
    'l': 6px,
    'xl': 8px,
    'all': 50%,
);

@each $radiusKey, $radiusValue in $border-radius-config {
    .radius-#{$radiusKey} {
        border-radius: $radiusValue;
    }
}

// 文本缩略
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 鼠标手势
.pointer {
    cursor: pointer;
}
